<template>
	<view style="padding: 20rpx 0;">
		<view class="box-list">
			<view class="box-item" v-for="typeItem in dataArr" :key="typeItem.type">
				<view class="label">
					<view class="img-icon" type="info"></view>
					<view style="flex:1;">
						{{typeItem.title}}
					</view>
					<image class="item_img" src="/static/image/know_up.png" mode="" @click="imgClick1(typeItem)"></image>
				</view>
				<template v-if="typeItem.isShow">
					<view class="items">
						<!-- <emptyWaybill v-if="typeItem.list.length==0" top="0" /> -->
						<view class="item" v-for="(item,index) in typeItem.list" :key="index"
							@click="goDetail(item.id)">
							<view class="item-top">
								<text class="title">{{item.rsName}}</text>
								<text class="num">{{item.fileNo}}</text>
							</view>
							<view class="item-bottom">
								<text class="dept">{{item.docDesc}}</text>
								<text class="date">{{item.modifyDate}}</text>
								<view class="img-icon" type="folder"></view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	export default {
		components: {
			emptyWaybill
		},
		data() {
			return {
				dataArr: [{
						type: 1,
						title: '法律',
						isShow: false,
						list: [],
					},
					{
						type: 2,
						title: '行政法规',
						isShow: false,
						list: [],
					},
					{
						type: 3,
						title: '部门规章',
						isShow: false,
						list: [],
					},
					{
						type: 4,
						title: '标准规范',
						isShow: false,
						list: [{
							rsName: '',
							fileNo: '',
							docDesc: '',
							modifyDate: ''
						}],
					},
					{
						type: 5,
						title: '行政规范',
						isShow: false,
						list: [],
					},
				],
				orgObj: {}
			}
		},
		methods: {
			imgClick1(item) {
				this.$set(item, 'isShow', item.list.length ? !item.isShow : false)
			},
			goDetail(id) {
				this.$api.policyKnowDetail(id).then(res => {
					let url = res.data.data.files[0].url
					this.$goBack('/pages/dgs_qy/preview/index?url=' + encodeURIComponent(url))
				})
			}
		},
		mounted() {
			// 查询五个分类的数据
			for (let i = 0; i < 5; i++) {
				this.$api.policyKnowPage({
					busiType: i + 1,
					size: 5,
					current: 1,
				}).then(res => {
					console.log(res, '--------', i + 1);
					this.dataArr[i].isShow = res.data.data.records.length ? true : false
					this.dataArr[i].list = res.data.data.records
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-list {
		padding: 14rpx 34rpx;

		.box-item {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			// box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);

			.label {
				font-size: 28rpx;
				color: #2084FF;
				line-height: 30rpx;
				height: 30rpx;
				padding: 26rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				background: rgba(32,132,255,0.04);
				border: 2rpx solid #2084FF;
				.item_img {
					width: 48rpx;
					height: 36rpx;
				}

				.img-icon {
					margin-right: 10rpx;
				}
			}

			.items {
				padding: 14rpx 28rpx;

				.item {
					padding: 10rpx;
					border-bottom: 1rpx solid #F0F0F0;

					&:last-child {
						border-bottom: 0;
					}

					.item-bottom,
					.item-top {
						display: flex;
						line-height: 60rpx;
					}

					.title {
						font-size: 32rpx;
						color: #333333;
						flex: 1;
						min-width: 60%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.num {
						color: #CA2828;
						font-size: 24rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.img-icon {
						font-size: 38rpx;
						vertical-align: middle;
					}

					.dept {
						color: #333333;
						font-size: 24rpx;
					}

					.date {
						color: #999999;
						font-size: 24rpx;
						flex: 1;
						padding-left: 30rpx;
					}
				}

			}
		}
	}
</style>